{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from 'macros-protocol.html' import card, callout, split %}
{% from "products/vpn/includes/macros.html" import vpn_resource_center_cta with context %}
{% from "products/vpn/cms/resource-center/includes/macros.html" import article_thumbnail_image with context %}

{% extends "products/vpn/cms/resource-center/base.html" %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('protocol-callout') }}
  {{ css_bundle('vpn-resource-center') }}
{% endblock page_css %}

{% block content %}
  <main class="mzp-l-content">
    {{ callout (
      title=page.title,
      desc=page.sub_title,
      class='resource-center-page-header resource-center-hero'
    )}}

    <div class="mzp-l-card-third">
      {% for article in first_article_group %}
        {{ card(
          title=article.title,
          ga_title=article.title,
          aspect_ratio='mzp-has-aspect-16-9',
          desc=article.desc,
          image=article_thumbnail_image(article.image),
          link_url=article.url
        ) }}
      {% endfor %}
    </div>

    {% if page.call_to_action_middle %}
      {% with snippet = page.call_to_action_middle %}
        {% include 'products/vpn/cms/snippets/call_to_action_save.html' %}
      {% endwith %}
    {% endif %}

    {% if second_article_group %}
    <div class="mzp-l-card-third">
      {% for article in second_article_group %}
        {{ card(
          title=article.title,
          ga_title=article.title,
          aspect_ratio='mzp-has-aspect-16-9',
          desc=article.desc,
          image=article_thumbnail_image(article.image),
          link_url=article.url
        ) }}
      {% endfor %}
    </div>

      {# Only show the second split if there was something after the first split #}
      {% if page.call_to_action_bottom %}
        {% with snippet = page.call_to_action_bottom %}
          {% include 'products/vpn/cms/snippets/call_to_action.html' %}
        {% endwith %}
      {% endif %}
    {% endif %}
  </main>
{% endblock %}
